<template>
    <div>
        <h4 class="margin_bottom20">商品列表</h4>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <el-button type="primary" size="small" @click="toAddItem"><i class="iconfont icon-plus"></i>新增商品</el-button>
                <el-button type="danger" size="small" @click="deleteItem" icon="delete">批量删除</el-button>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="搜索..." size="small" v-model="searchKey"><el-button slot="append" icon="search" @click="loadData"></el-button></el-input>
            </el-col>
        </el-row>

        <el-table :data="tableData" border style="width: 100%; text-align: center;margin-top:10px;" v-loading.body="loading">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="缩略图" header-align="center">
                <template scope="scope">
                    <img :src="tableData[scope.$index].image" style="width:60px;">
                </template>
            </el-table-column>
            <el-table-column prop="title" header-align="center" label="标题"></el-table-column>
            <el-table-column prop="sellPoint" header-align="center" label="卖点"></el-table-column>
            <el-table-column prop="cname" header-align="center" label="分类"></el-table-column>
            <el-table-column prop="price" header-align="center" label="价格" width="70"></el-table-column>
            <el-table-column prop="num" header-align="center" label="数量" width="70"></el-table-column>
            <el-table-column prop="limitNum" header-align="center" label="限制" width="70"></el-table-column>
            <el-table-column prop="created" header-align="center" label="创建"></el-table-column>
            <el-table-column prop="updated" header-align="center" label="更新"></el-table-column>
            <el-table-column  header-align="center" label="状态">
                <template scope="scope">
                    <el-tag v-if="tableData[scope.$index].status == 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">下架</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作" >
                <template scope="scope">
                    <p><el-button type="primary" @click="toEditItem(tableData[scope.$index])" size="small">修改</el-button></p>
                    <p><el-button type="danger" @click="deleteItem(tableData[scope.$index].id)" size="small">删除</el-button></p>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,20,50,100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog title="商品信息" :visible.sync="itemDialogVisible">
            <el-form :model="currentItem">
                <el-form-item label="商品标题">
                    <el-input v-model="currentItem.title"></el-input>
                </el-form-item>
                <el-form-item label="商品卖点">
                    <el-input v-model="currentItem.sellPoint"></el-input>
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-input v-model="currentItem.cname" @focus="toAddCategory"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="currentItem.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input v-model="currentItem.num"></el-input>
                </el-form-item>
                <el-form-item label="售卖限制">
                    <el-input v-model="currentItem.limitNum"></el-input>
                </el-form-item>
                
                <el-form-item label="是否启用">
                    <el-switch v-model="currentItem.status"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveItem">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="选择商品分类"
            v-model="categoriesDialogVisible">
            <el-tree
                :data="CategoryData"
                highlight-current
                @node-click="handleNodeClick">
            </el-tree>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentPage: 1,
            total: 0,
            limit: 20,
            searchKey: "",
            tableData: [],
            CategoryData: [],
            currentItem: {},
            loading: false,
            itemDialogVisible: false,
            categoriesDialogVisible: false
        };
    },
    methods: {
        loadData() {
            this.loading = true;
            this.$axios.get(API.rootPath + "/items", {params:{offset: this.limit*(this.currentPage - 1), limit: this.limit, searchKey: this.searchKey}})
                .then((response) => {
                    this.tableData = response.data.data.rows;
                    this.total = response.data.data.total;
                    this.loading = false;
                })   
        },
        loadCategories() {
            this.$axios.get(API.rootPath + "/item-cats/getJsonTree/").then((response) => {
                this.CategoryData = response.data.data;
                })
        },
        handleSizeChange(limit) {
            this.limit = limit;
            this.loadData();
        },
        handleCurrentChange(currentChange) {
            this.currentPage = currentChange;
            this.loadData();
        },
        handleNodeClick(val) {
            if (val.isParent == 0) {
                this.currentItem.cid = val.id;
                this.currentItem.cname = val.label;
                this.categoriesDialogVisible = false;
            }
        },
        saveItem() {
            this.currentItem.status = this.currentItem.status ? 1 : 0;
            this.$axios.post(API.rootPath + "/items", this.currentItem).then((response) => {
                this.loadData();
                this.itemDialogVisible = false;
            })
        },
        deleteItem(id) {
            this.$axios.delete(API.rootPath + "/items/" + id).then((response) => {
                if (response.data.status == 0) {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    })
                    this.loadData();
                }
            })
        },
        toAddItem() {
            this.currentItem = {}
            this.itemDialogVisible = true;
        },
        toAddCategory() {
            this.categoriesDialogVisible = true;
        },
        toEditItem(item) {
            this.currentItem = item;
            this.currentItem.status = this.currentItem.status? true : false;
            this.itemDialogVisible = true;
        }
    }, 
    created() {
        this.loadData();
        this.loadCategories();
    }
};
</script>

